<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>修改表格模板</title> 

    <style type="text/css">
        @import url("/pages/import/base.css");
        @import url("/pages/import/codemirror.css");
        html, body{ margin:0; height:100%; }
    </style>
    <script type="text/javascript" src="/pages/import/base.js"></script>
    <script type="text/javascript" src="/pages/import/codemirror.js"></script>

    
<style type="text/css">
    html, body{ margin:0; height:100%;width: 100%;overflow: auto;}
    .CodeMirror {
      border: 1px solid #eee;
      height: auto;
    }
    #footer{  
        position: absolute;  top: 400px; /* 关键 */  
        right: 15px; /* IE下一定要记得 */  
        height: 35px;         /* footer的高度一定要是固定值*/  
        border:1px solid #bbe1f1;background:#eefaff
    }     
</style>



<body class="easyui-layout">
    <div data-options="region:'west',iconCls:'icon-reload',title:'',split:false" style="width:50%;">
        <table class="editTable" style="text-align: center;" >
            <tr>
                <td class="label" colspan="4" style="text-align: left;font-size: 20px;">
                    <div class="divider">
                        <span style="margin-left: 50px">表信息</span>
                    </div>
                </td>
            </tr>               
            <tr>
                <td class="label">模板名称</td>
                <td >
                    <input id='name' class="easyui-textbox" data-options="required:false,width:200,editable:true">
                </td>
            </tr>
             <tr>
                <td class="label">数据加载链接地址</td>
                <td colspan="3">
                    <input id='url' class="easyui-textbox" style="width: 554px" data-options="required:false,width:200,editable:true">
                </td>
            </tr>
             <tr>
                <td class="label">rowNumbers</td>
                <td >                
                    <select id='rowNumbers' class="easyui-combobox" data-options="required:false,width:200,editable:true">
                        <option value=true>true</option>  
                        <option value=false>false</option>         
                    </select>
                </td>                
                </td>

                <td class="label">singleSelect</td>
                <td >                
                    <select id='singleSelect' class="easyui-combobox" data-options="required:false,width:200,editable:true">
                        <option value=true>true</option>  
                        <option value=false>false</option>         
                    </select>
                </td>                
                </td>
            </tr>          
             <tr>
                <td class="label">autoRowHeight</td>
                <td >                
                    <select id='autoRowHeight' class="easyui-combobox" data-options="required:false,width:200,editable:true">
                        <option value=true>true</option>  
                        <option value=false>false</option>         
                    </select>
                </td>                
                </td>

                <td class="label">pagination</td>
                <td >                
                    <select id='pagination' class="easyui-combobox" data-options="required:false,width:200,editable:true">
                        <option value=true>true</option>  
                        <option value=false>false</option>         
                    </select>
                </td>                
                </td>
            </tr>   
             <tr>
                <td class="label">fitColumns</td>
                <td >                
                    <select id='fitColumns' class="easyui-combobox" data-options="required:false,width:200,editable:true">
                        <option value=true>true</option>  
                        <option value=false>false</option>         
                    </select>
                </td>                
                </td>

                <td class="label">striped</td>
                <td >                
                    <select id='striped' class="easyui-combobox" data-options="required:false,width:200,editable:true">
                        <option value=true>true</option>  
                        <option value=false>false</option>         
                    </select>
                </td>                
                </td>
            </tr>           
             <tr>
                <td class="label">checkOnSelect</td>
                <td >                
                    <select id='checkOnSelect' class="easyui-combobox" data-options="required:false,width:200,editable:true">
                        <option value=true>true</option>  
                        <option value=false>false</option>         
                    </select>
                </td>                
                </td>

                <td class="label">selectOnCheck</td>
                <td >                
                    <select id='selectOnCheck' class="easyui-combobox" data-options="required:false,width:200,editable:true">
                        <option value=true>true</option>  
                        <option value=false>false</option>         
                    </select>
                </td>                
                </td>
            </tr>     
             <tr>
                <td class="label">collapsible</td>
                <td >                
                    <select id='collapsible' class="easyui-combobox" data-options="required:false,width:200,editable:true">
                        <option value=true>true</option>  
                        <option value=false>false</option>         
                    </select>
                </td>                
                </td>
            </tr>             


            
            <tr>
                <td class="label" colspan="4" style="text-align: left;font-size: 20px;">
                    <div class="divider">
                        <span style="margin-left: 50px">表头信息</span>
                    </div>
                </td>
            </tr>         
            <tr>
                <td colspan="4">
                    <div class="easyui-panel" style="width: 700px; margin-left: 143px; margin-top: 0px" data-options=" border:false">
                        <table id="dg3" class="easyui-datagrid" title="" style="width:554px;height:auto"
                            data-options="
                                iconCls: 'icon-edit',
                                singleSelect: true,
                                toolbar: '#tb',
                                method: 'get'
                            ">
                        <thead>
                        <tr>
                            <th field="uuid" hidden="true">编号</th>
                            <th field="template_id" hidden="true">template_id</th>
                            <th field="field">field</th>
                            <th field="title">title</th>
                            <th field="align">align</th>
                            <th field="width">width</th>
                            <th field="hidden">hidden</th>
                        </tr>
                        </thead>
                        </table>
                        <div id="tb" style="height:35px">
                                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-plus',plain:true" onclick="add()">新增</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-trash',plain:true" onclick="dele()">删除</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-check',plain:true" onclick="edit()">修改</a>
                        </div>
                    </div>
                </td>
            </tr>

           <tr>
                <td class="label" colspan="4" style="text-align: left;font-size: 20px;">
                    <div class="divider">
                        <span style="margin-left: 50px">按钮列表</span>
                    </div>
                </td>
            </tr>         
            <tr>
                <td colspan="4">
                    <div class="easyui-panel" style="width: 700px; margin-left: 143px; margin-top: 0px" data-options=" border:false">
                        <table id="dg_button" class="easyui-datagrid" title="" style="width:554px;height:auto"
                            data-options="
                                iconCls: 'icon-edit',
                                singleSelect: true,
                                toolbar: '#tb_button',
                                method: 'get'
                            ">
                        <thead>
                        <tr>
                            <th field="uuid" hidden="true">编号</th>
                            <th field="template_id" hidden="true">template_id</th>
                            <th field="value">value</th>
                            <th field="id_name">id</th>
                            <th field="iconCls">iconCls</th>
                            <th field="plain">plain</th>
                            <th field="onclick">onclick</th>
                        </tr>
                        </thead>
                        </table>
                        <div id="tb_button" style="height:35px">
                                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-plus',plain:true" onclick="addButton()">新增</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-trash',plain:true" onclick="deleButton()">删除</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-check',plain:true" onclick="editButton()">修改</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-arrow-up',plain:true" onclick="Easyui.Datagraid.rowUp('dg_button')">上移</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-arrow-down',plain:true" onclick="Easyui.Datagraid.rowDown('dg_button')">下移</a>                                                  
                        </div>
                    </div>
                </td>
            </tr>      

            <tr>
                <td class="label" colspan="4" style="text-align: left;font-size: 20px;">
                    <div class="divider">
                        <span style="margin-left: 50px">检索栏列表</span>
                    </div>
                </td>
            </tr>         
            <tr>
                <td colspan="4">
                    <div class="easyui-panel" style="width: 700px; margin-left: 143px; margin-top: 0px" data-options=" border:false">
                        <table id="dg_search" class="easyui-datagrid" title="" style="width:554px;height:auto"
                            data-options="
                                iconCls: 'icon-edit',
                                singleSelect: true,
                                toolbar: '#tb_search',
                                method: 'get'
                            ">
                        <thead>
                        <tr>
                            <th field="uuid" hidden="true">编号</th>
                            <th field="id">id</th>
                            <th field="template_id" hidden="true">template_id</th>
                            <th field="clazz">clazz</th>                        
                            <th field="editable">editable</th>
                            <th field="prompt">prompt</th>
                            <th field="hidden">hidden</th> 
                        </tr>
                        </thead>
                        </table>
                        <div id="tb_search" style="height:35px">
                                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-plus',plain:true" onclick="addSearch()">新增</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-trash',plain:true" onclick="deleSearch()">删除</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-check',plain:true" onclick="editSearch()">修改</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="label" colspan="4" style="text-align: left;font-size: 20px;">
                    <div class="divider">
                        <span style="margin-left: 50px">js加强</span>
                    </div>
                </td>
            </tr>      
            <tr>
                <td colspan="4">
                    <div class="easyui-panel" style="width:700px; margin-top: 0px" data-options=" border:false">
                        <!-- <input type="text" id="jsstrengthen" class="easyui-textbox" data-options="width:554,height:300,multiline:true"> -->
                        <textarea id="jsstrengthen" style="width: 200px;margin-right: 143px;"></textarea>
                    </div>
                </td>
            </tr>  


            <tr style="margin-top: 100px"> 
                <td></td>
                <td >
                </td>
                <td>
                </td>
                <td  style="text-align: right;margin-top: 100px">
                      <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-save',plain:true" onclick="save()" style="color:black;width:80px;height:auto;background-color: #00CD66">保存</a>
                </td>               
            </tr>          
        </table>
        <div id="footer" class='no-print'>  
            <a id="btnRefrish" class="easyui-linkbutton" data-options="iconCls:'fa fa-paper-plane',plain:true" onclick="refish()">保存刷新</a>    
        </div>         
    </div>   
    <div data-options="region:'center',title:'',split:false" style="width:50%;height: 100%">
        <div id='panels_welcome' style="width: 100%;height: 100%"></div>
    </div>       


    
</body> 
</html>
<script type="text/javascript">

    var project = new Object();


    $(function(){
        initJsCodeText();
        $.ajax({
            url: '/develop/url/getUrl.do',
            type: "POST",
            dataType: 'json',
            data: {
                'name': 'getPageTemplateById',
                'uuid':shuoheUtil.getUrlHeader().uuid
            },
            error: function() //失败
            {
                shuoheUtil.layerSaveMaskOff();
            },
            success: function(data) //成功
            {
                shuoheUtil.layerSaveMaskOff();
                project = data;

                $('#name').textbox('setValue',data.name);
                $('#url').textbox('setValue',data.url);
                $('#rowNumbers').combobox('setValue',data.rowNumbers);
                $('#singleSelect').combobox('setValue',data.singleSelect);
                $('#autoRowHeight').combobox('setValue',data.autoRowHeight);
                $('#pagination').combobox('setValue',data.pagination);
                $('#fitColumns').combobox('setValue',data.fitColumns);
                $('#striped').combobox('setValue',data.striped);
                $('#checkOnSelect').combobox('setValue',data.checkOnSelect);
                $('#selectOnCheck').combobox('setValue',data.selectOnCheck);
                $('#collapsible').combobox('setValue',data.collapsible);
                // $('#jsstrengthen').textbox('setValue',data.jsstrengthen);

                editor.setValue(data.jsstrengthen);
                loadDatagraid();

                // window.setInterval(function() 
                // { 
                //     loadPreviewPage(project.id); 
                // }, 1000); 
                // setInterval(loadPreviewPage(project.id),1000);
                loadPreviewPage(project.uuid);
            }
        });



    })

    function loadPreviewPage(id)
    {
        console.info('id = '+id);
        $("#panels_welcome").empty().append('<iframe src="preview.html?uuid='+id+'" style="width:100%;height:100%"></iframe>');
    }

    function initJsCodeText()
    {
        console.info('initJsCodeText');
        editor=CodeMirror.fromTextArea(document.getElementById("jsstrengthen"),{
            theme:'monokai', 
            styleActiveLine: true,
            mode:'javascript',
            extraKeys: {"Ctrl": "autocomplete"},//输入s然后ctrl就可以弹出选择项  
            lineNumbers: true,
            tabSize:10,
            // readOnly:"nocursor",
            smartIndent:true
            // keymap:"defaule"
        })
    }    
    function loadDatagraid() {
        $('#dg3').datagrid({
            url: '/develop/url/getUrl.do',
            queryParams: {
                name: 'getDatagraidColumnByTemplateId',
                template_id:project.uuid
            },
            method: 'get',
            onLoadSuccess:function(data)
            {

            }
        })

        $('#dg_button').datagrid({
            url: '/develop/url/getUrl.do',
            queryParams: {
                name: 'getDatagraidButtonByTemplateId',
                template_id:project.uuid
            },
            method: 'get',
            onLoadSuccess:function(data)
            {

            }
        })

        $('#dg_search').datagrid({
            url: '/develop/url/getUrl.do',
            queryParams: {
                name: 'getSearchBoxForPageTemplate',
                template_id:project.uuid
            },
            method: 'get',
            onLoadSuccess:function(data)
            {

            }
        })
    }

    function save() {

        shuoheUtil.layerTopMaskOn();

        project.name = $('#name').textbox('getValue');
        project.url = $('#url').textbox('getValue');
        project.rowNumbers = $('#rowNumbers').combobox('getValue');
        project.singleSelect = $('#singleSelect').combobox('getValue');
        project.autoRowHeight = $('#autoRowHeight').combobox('getValue');
        project.pagination = $('#pagination').combobox('getValue');
        project.fitColumns = $('#fitColumns').combobox('getValue');
        project.striped = $('#striped').combobox('getValue');
        project.checkOnSelect = $('#checkOnSelect').combobox('getValue');
        project.selectOnCheck = $('#selectOnCheck').combobox('getValue');
        project.collapsible = $('#collapsible').combobox('getValue');
        project.jsstrengthen = editor.getValue();//$('#jsstrengthen').textbox('getValue');
        // project.jsstrengthen = $('#jsstrengthen').textbox('getValue');
        // project.toolbar = $('#toolbar').textbox('getValue');
        project.pageSize = 10;
        
        $.ajax({
            url:'/develop/pagetemplate/updateDatagraidAndColumns.do',
            type: "POST",
            dataType: 'json',
            data: {
                'datagraid': JSON.stringify(project),
                'datagraidColumns':JSON.stringify($('#dg3').datagrid('getRows')),
                'datagraidButtons':JSON.stringify($('#dg_button').datagrid('getRows')),
                'searchForms':JSON.stringify($('#dg_search').datagrid('getRows'))
            },
            error: function() //失败
            {
                shuoheUtil.layerTopMaskOff();
            },
            success: function(data) //成功
            {
                shuoheUtil.layerTopMaskOff();
                if (data.result == true) {
                    // shuoheUtil.layerClose();
                    parent.updateSuccess();
                } else
                    shuoheUtil.layerMsgCustom(data.describe);
            }
        });
    }
     function saveAndFresh() {

        shuoheUtil.layerTopMaskOn();

        project.name = $('#name').textbox('getValue');
        project.url = $('#url').textbox('getValue');
        project.rowNumbers = $('#rowNumbers').combobox('getValue');
        project.singleSelect = $('#singleSelect').combobox('getValue');
        project.autoRowHeight = $('#autoRowHeight').combobox('getValue');
        project.pagination = $('#pagination').combobox('getValue');
        project.fitColumns = $('#fitColumns').combobox('getValue');
        project.striped = $('#striped').combobox('getValue');
        project.checkOnSelect = $('#checkOnSelect').combobox('getValue');
        project.selectOnCheck = $('#selectOnCheck').combobox('getValue');
        project.collapsible = $('#collapsible').combobox('getValue');
        project.jsstrengthen = editor.getValue();//$('#jsstrengthen').textbox('getValue');
        // project.jsstrengthen = $('#jsstrengthen').textbox('getValue');
        // project.toolbar = $('#toolbar').textbox('getValue');
        project.pageSize = 10;
        
        $.ajax({
            url:'/develop/pagetemplate/updateDatagraidAndColumns.do',
            type: "POST",
            dataType: 'json',
            data: {
                'datagraid': JSON.stringify(project),
                'datagraidColumns':JSON.stringify($('#dg3').datagrid('getRows')),
                'datagraidButtons':JSON.stringify($('#dg_button').datagrid('getRows')),
                'searchForms':JSON.stringify($('#dg_search').datagrid('getRows'))
            },
            error: function() //失败
            {
                shuoheUtil.layerTopMaskOff();
                shuoheUtil.layerMsgCustom('通讯故障');
            },
            success: function(data) //成功
            {
                shuoheUtil.layerTopMaskOff();
                if (data.result == true) {
                    shuoheUtil.layerMsgOK('保存刷新成功');
                    loadPreviewPage(project.uuid);
                    // shuoheUtil.layerClose();
                    parent.updateSuccess();
                } else
                    shuoheUtil.layerMsgCustom(data.describe);
            }
        });
    }



</script>
<script type="text/javascript">
    function add()
    {
        Easyui.Layer.openAddLayerWindow('新增数据表头','form/addColumn.html',['800px','300px']);
    }
    function edit()
    {
        var row = Easyui.Datagraid.getSelectRow('dg3');
        if (row == null) {
            layerMsgCustom('必须选择一条数据');
            return;
        }
        Easyui.Layer.openAddLayerWindow(
            '修改数据表头',
            'form/editColumn.html',
            ['800px','300px']
        );
    }
    function dele()
    {
        console.info('dele');
        Easyui.Datagraid.deleteSeleectRow('dg3');
    }
</script>

<script type="text/javascript">
    function addButton()
    {
        Easyui.Layer.openAddLayerWindow('新增按钮','form/addButton.html',['800px','300px']);
    }
    function deleButton()
    {
        Easyui.Datagraid.deleteSeleectRow('dg_button');
    }
    function editButton()
    {
        var row = Easyui.Datagraid.getSelectRow('dg_button');
        if (row == null) {
            layerMsgCustom('必须选择一条数据');
            return;
        }
        Easyui.Layer.openAddLayerWindow(
            '修改按钮',
            'form/editButton.html',
            ['800px','300px']
        );
    }
    function refish()
    {
        // loadPreviewPage(project.uuid);
        saveAndFresh();
    }
</script>

<script type="text/javascript">
    function addSearch()
    {
        Easyui.Layer.openAddLayerWindow('新增按钮','form/addSearch.html',['800px','300px']);
    }
    function deleSearch()
    {
        Easyui.Datagraid.deleteSeleectRow('dg_search');
    }
    function editSearch()
    {
        var row = Easyui.Datagraid.getSelectRow('dg_search');
        if (row == null) {
            layerMsgCustom('必须选择一条数据');
            return;
        }
        Easyui.Layer.openAddLayerWindow(
            '修改按钮',
            'form/editSearch.html',
            ['800px','300px']
        );
    }

</script>